<template>
  <view class="register-container">
    <!-- 背景图 -->
    <image src="/static/auth-bg.jpg" class="bg-image" mode="aspectFill" />
    
    <!-- 登录卡片 -->
    <view class="card">
      <!-- 标题 -->
      <view class="header">
        <text class="title">用户登录</text>
       
      </view>
      
      <!-- 表单区域 -->
      <view class="form">
        <!-- 用户名 -->
        <view class="form-item" :class="{ 'error': errors.username }">
          <input 
            v-model="form.username" 
            placeholder="请输入用户名/手机号"
            @blur="validateField('username')"
          />
          <text class="error-msg">{{ errors.username }}</text>
        </view>
        
        <!-- 密码 -->
        <view class="form-item" :class="{ 'error': errors.password }">
          <input
            v-model="form.password"
            placeholder="请输入密码"
            password
            @blur="validateField('password')"
          />
          <text class="error-msg">{{ errors.password }}</text>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <button 
        class="register-btn" 
        :disabled="!isFormValid || isSubmitting"
        :loading="isSubmitting"
        @click="handleLogin"
      >
        {{ isSubmitting ? '登录中...' : '立即登录' }}
      </button>
      
      <!-- 其他操作 -->
      <view class="footer">
        <text @click="navigateTo('register')">注册账号</text>
        <text class="forget-link" @click="navigateTo('forget')">忘记密码？</text>
      </view>
    </view>
  </view>
</template>

<script setup lang='ts'>
import { ref, reactive, computed } from 'vue'
import http from '@/utils/http'
// 表单数据
const form = reactive({
  username: '',
  password: ''
})

// 错误提示
const errors = reactive({
  username: '',
  password: ''
})

// 状态控制
const isSubmitting = ref(false)

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名' },
    { min: 3, message: '用户名至少3位' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, message: '密码至少6位' }
  ]
}

// 验证表单字段
const validateField = (field) => {
  const value = form[field]
  errors[field] = ''

  for (const rule of rules[field]) {
    if (rule.required && !value) {
      errors[field] = rule.message
      break
    }
    
    if (rule.min && value.length < rule.min) {
      errors[field] = rule.message
      break
    }
  }
}

// 表单是否有效
const isFormValid = computed(() => {
  return Object.values(errors).every(error => !error) && 
         form.username && 
         form.password
})

// 提交登录

interface LoginParams {
  username: string
  password: string
}

interface LoginResponse {
  token: string
  userInfo: {
    id: number
    name: string
  }
}

const handleLogin = async () => {
  try {
    const res = await http.request<LoginResponse>({
      url: '/auth/login',
      method: 'POST',
      data: {
        username: form.username,
        password: form.password
      },
      loadingText: '登录中...'
    })
    
    // 登录成功处理
    uni.reLaunch({ url: '/pages/home/index' })
  } catch (error) {
    console.error('登录失败:', error)
  }
}

// 页面跳转
const navigateTo = (page) => {
  uni.navigateTo({ url: `/pages/${page}/${page}` })
}
</script>

<style lang="scss" scoped>
.register-container {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
}

.card {
  width: 85%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 50rpx;
  text-align: center;
  .title {
    display: block;
    font-size: 42rpx;
    font-weight: bold;
    color: #333;
  }
 
}

.form-item {
  margin-bottom: 30rpx;
  position: relative;
  
  input {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    background: #f9f9f9;
    font-size: 28rpx;
    
    &:focus {
      border-color: #007AFF;
    }
  }
  
  &.error input {
    border-color: #ff4d4f;
  }
  
  .error-msg {
    color: #ff4d4f;
    font-size: 24rpx;
    margin-top: 8rpx;
    display: block;
    height: 30rpx;
  }
}

.register-btn {
  margin-top: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  color: #fff;
  background: linear-gradient(to right, #007AFF, #00A0FF);
  border-radius: 45rpx;
  font-size: 32rpx;
  
  &[disabled] {
    opacity: 0.7;
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  color: #999;
  font-size: 26rpx;
  
  .forget-link {
    color: #007AFF;
  }
}

/* 重置小程序按钮样式 */
button::after {
  border: none !important;
}
</style>